<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="warp_black">
    <div class="init">
        <p><span>书名: </span><input type="text">  *</p>
        <p><span>作者: </span><input type="text" >  *</p>
        <p><span>价格: </span><input type="text">  *</p>
        <p><span>类别: </span><input type="text"> </p>
        <p><span>出版社: </span><input type="text">  *</p>
        <p><span>出版时间: </span><input type="text"></p>
        <p><button class="dis">提交</button><button>取消</button></p>
        <p>*内容为必填</p>
    </div>
    <div class="change">
        <p><span>书名: </span><input type="text" disabled>  *</p>
        <p><span>作者: </span><input type="text" disabled>  *</p>
        <p><span>价格: </span><input type="text">  *</p>
        <p><span>类别: </span><input type="text"> </p>
        <p><span>出版社: </span><input type="text">  *</p>
        <p><span>出版时间: </span><input type="text"></p>
        <p><button class="dis">提交</button><button>取消</button></p>
        <p>*内容为必填</p>
    </div>
    <div class="show">
        <p><span>书名: </span><input type="text" disabled>  *</p>
        <p><span>作者: </span><input type="text" disabled>  *</p>
        <p><span>价格: </span><input type="text" disabled>  *</p>
        <p><span>类别: </span><input type="text" disabled></p>
        <p><span>出版社: </span><input type="text" disabled>  *</p>
        <p><span>出版时间: </span><input type="text" disabled></p>
        <p><button disabled>提交</button><button>取消</button></p>
        <p>*内容为必填</p>
    </div>
</div>
<div class="warp">
    <div class="header">
        <div class="_header">
            <div class="h_logo"><a href="##">图书管理系统</a></div>
            <ul class="h_nav clear">
                <li>
                    <dt class="h_d1"></dt>
                    <dd><a href="##">首页</a></dd>
                </li>
                <li>
                    <dl>
                        <dt class="h_d2"></dt>
                        <dd><a href="##">系统设置</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt class="h_d3"></dt>
                        <dd><a href="##">登陆注册</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt class="h_d4"></dt>
                        <dd><a href="##">帮助</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="_main">
        <div class="main">
            <div class="m_left">
                <div class="mL_top">
                    <div class="mL_logo">｡•ˇ‸ˇ•｡</div>
                    <dl>
                        <dt><span id="user">游客</span></dt>
                        <dd>请<a href="html/login.html">登录</a></dd>
                    </dl>
                    <div id="log">
                        <p id="changePwd">修改密码</p>
                        <p id="logout">注销</p>
                    </div>
                </div>
                <div class="mL_ul">
                    <ul>
                        <li><img src="img/main/xiaotu.png" alt="">图书信息管理</li>
                        <li><img src="img/main/xiaotu.png" alt="">修改用户密码</li>
                        <li><img src="img/main/xiaotu.png" alt="">...</li>
                        <li><img src="img/main/xiaotu.png" alt="">...</li>
                        <li><img src="img/main/xiaotu.png" alt="">...</li>
                        <li><img src="img/main/xiaotu.png" alt="">...</li>
                    </ul>
                </div>
            </div>
            <div class="m_right">
                <div class="mR_top">
                    <p>您当前的位置:
                        <span>首页 > </span>
                        <span>图书信息管理</span>
                        <span></span>
                    </p>
                    <ul>
                        <li>2014年06月30日</li>
                        <li>16:18:10</li>
                        <li>星期一</li>
                    </ul>
                </div>
                <div class="mR_main">
                    <div class="mR_warp shows">
                        <div class="mR_warp_top">图书信息管理</div>
                        <div class="mR_warp_box">
                            <button>新增</button>
                            <button>删除</button>
                        </div>
                            <table class="mR_warp_table" cellspacing=''>
                                <thead>
                                <tr>
                                    <th><input type="checkbox" id="check"></th>
                                    <th>书名</th>
                                    <th>作者</th>
                                    <th>价格</th>
                                    <th>类别</th>
                                    <th>出版社</th>
                                    <th>出版时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                                <tfoot>
                                <tr class="trLast">
                                    <td colspan="8">
                                        <ul>
                                            <li>共 <span id="count">n</span>条记录</li>
                                            <li>
                                                <span>1/1页</span>
                                                <ul id="yeMa">
                                                    <li class="point">1</li>
                                                </ul>
                                            </li>
                                            <li>到第 <input type="text" id="yeMatxt"></li>
                                            <li><button>前往</button></li>
                                        </ul>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    <div class="mR_warp">
                        <div class="mR_warp_top">修改用户密码</div>
                        <div class="mR_warp_box">
                            <div class="changeUser">
                                <p><span>新密码:</span><input type="password" id="pwd2" name="password"></p>
                                <p><span>确认密码:</span><input type="password" id="_pwd2"></p>
                                <p><input class="btn" type="button" id="changeUser" value="修改"></p>
                            </div>
                        </div>
                    </div>
                    <div class="mR_warp">
                        <div class="mR_warp_top">...</div>
                        <div class="mR_warp_box"></div>
                    </div>
                    <div class="mR_warp">
                        <div class="mR_warp_top">...</div>
                        <div class="mR_warp_box"></div>
                    </div>
                    <div class="mR_warp">
                        <div class="mR_warp_top">...</div>
                        <div class="mR_warp_box"></div>
                    </div>
                    <div class="mR_warp">
                        <div class="mR_warp_top">...</div>
                        <div class="mR_warp_box"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>版权所有</p>
        </div>
    </div>
    <!--<div class="_main"></div>-->

</div>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/books.js"></script>
<script src="js/js.js"></script>
<script>
    //主体左边tag切换;
    $('.mL_ul li').on('click',function () {
        $(this).css('background','#025da4').siblings().css('background','#1c203a');
        $('.mR_warp').eq($(this).index()).css('display','block').siblings().css('display','none');
    });

    //用户模块操作;
    //读取本地存储;
    if (localStorage.getItem('userUid')){
        sessionStorage.setItem('userUid',localStorage.getItem('userUid'));
        localStorage.removeItem('userUid');
        var uid = sessionStorage.getItem('userUid');
        var username = '';
        //修改用户信息界面;
        $.ajax({
            url:'http://localhost:2403/users',
            success:function (data) {
                for (var i in data){
                    if (data[i].id == uid){
                        $('#user').html(data[i].username).parent().siblings().html('欢迎登陆');
                        username = data[i].username;
                    }
                }
                //用户名点击出现下拉框;
                $('#user').on('click',function () {
                    //注销按钮点击事件;
                    $('#log').slideToggle('normal').find('#logout')
                        .off('click').on('click',function () {
                        $.ajax({
                            url:'http://localhost:2403/users/logout',
                            type:'post',
                            success:function () {
                                localStorage.removeItem('userUid');
                                location.href = 'html/login.html'
                            }
                        })
                        //修改按钮点击显示修改界面;
                    }).siblings().off('click').on('click',function () {
                        $('.mR_warp').eq(1).css('display','block')
                            .siblings().css('display','none');
                        $('.mL_ul li').eq(1).css('background','#025da4')
                            .siblings().css('background','#1c203a');
                        $(this).parent().slideToggle('normal');
                    })
                })
            },
            error:function (err) {
                console.log(err)
            }
        });
        //修改用户信息;
        $('#changeUser').on('click',function () {
            if ($('#pwd2').val() == $('#_pwd2').val()){
                $.ajax({
                    url:'http://localhost:2403/users/' + uid,
                    type:'put',
                    data:{
                        id:uid,
                        username:username,
                        password:$('#pwd2').val()
                    },
                    success:function (data) {
                        $.ajax({
                            url:'http://localhost:2403/users/logout',
                            type:'post',
                            success:function () {
                                location.href = 'html/login.html'
                            }
                        })
                    },
                    error:function () {
                        alert('修改失败')
                    }
                })
            }else {
                alert('两次输入密码不一致')
            }
        });
    }else {
        $('input').attr('disabled','disabled');
        $('.warp_black .dis').attr('disabled','disabled');
        $('#user').html('游客');
    }
</script>
</html>